<template>
	<view class="container">
		<Back />
		<view class="banner"><ImageLoad :src="detailData.coverUrl"/></view>
		<view class="banner-title">
			<image src="../../static/icon/jing.png" mode="widthFix"></image>
			<text>{{ detailData.name }}</text>
			<view class="mark"></view>
			<text>{{ detailData.summary }}</text>
		</view>
		<view class="description">{{ detailData.description }}</view>
		<view class="tips">
			<view class="tip">
				<image src="../../static/icon/subscribe.png" mode="widthFix"></image>
				<text>订阅数：10万+人</text>
			</view>
			<view class="tip">
				<image src="../../static/icon/book.png" mode="widthFix"></image>
				<text>已更新 {{ detailData.picbooks.length }} 期内容</text>
			</view>
		</view>
		<view class="phase" hover-class="touch" hover-start-time="0" hover-stay-time="300" v-for="(item, index) in detailData.picbooks" :key="index" @tap="phaseTap(index)">
			<view class="phase-box">
				<view class="image"><ImageLoad :src="item.backgroundUrl" borderRadius="30"/></view>
			</view>
			<view class="phase-box">
				<text class="title">{{ item.name }}</text>
				<view class="mark" :style="{ background: index === phaseCurrent ? '#FED36B' : '#CFCFCF' }"></view>
				<view class="collect" @tap.stop="collectTap(index)" hover-class="touch" hover-start-time="0" hover-stay-time="300">
					<image :src="item.collected ? ' ../../static/icon/collect.png' : '../../static/icon/collect_no.png'" class="img" mode="widthFix"></image>
					{{ item.collected ? '已收藏' : '未收藏' }}
				</view>
			</view>
		</view>
		<view class="bottom fonts" :style="{ height: iphoneX ? '150rpx' : '100rpx' }">
			<view class="pay" @tap="start" hover-class="touch" hover-stay-time="100">开始阅读</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detailData: {},
			iphoneX: this.config.isIphoneX,
			phaseCurrent: 0
		}
	},
	onLoad(option) {
		this.detailData = JSON.parse(decodeURIComponent(option.item))
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/picbookList/picbookList',
			imageUrl: ''
		}
	},
	methods: {
		phaseTap: function(index) {
			this.phaseCurrent = index
		},
		start: async function() {
			uni.showLoading({
				title: '正在加载',
				mask: true
			})
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadPicbookData, { picbookId: this.detailData.picbooks[this.phaseCurrent].id }))
			uni.hideLoading()
			if (err) {
				uni.showToast({
					title: '网络异常',
					icon: 'none',
					duration: 2000
				})
				return
			}
			this.$Router.push({ name: 'picbook', query: { item: JSON.stringify(data.picbook) } })
		},
		collectTap: async function(index) {
			const picbook = this.detailData.picbooks[index]
			const [data, err] = await this.awaitWarp(this.$post(this.api.collectPicbook, { deviceUuid: this.deviceUuid, picbookId: picbook.id, collected: !picbook.collected }))
			if (data) picbook.collected = !picbook.collected
		}
	}
}
</script>

<style scoped lang="stylus">
.container
	width 100vw
	height auto
	min-height 100vh
	display flex
	flex-direction column
	background white
	padding-bottom 200rpx

	.banner
		position relative
		width 750rpx
		height 450rpx
		border-radius 0 0 18% 18%
		overflow hidden
		transform translate3d(0, 0, 0)

	.banner-title
		font-size 35rpx
		font-weight bold
		width 650rpx
		margin 40rpx 0 0 80rpx
		position relative
		line-height 50rpx

		image
			position absolute
			left -45rpx
			top 7rpx
			width 35rpx
			height auto

		.mark
			width 10rpx
			height 35rpx
			background #fedc86
			border-radius 5rpx
			display inline-block
			margin 0 10rpx
			transform translateY(5rpx)

	.description
		font-size 28rpx
		color #7C7875
		text-indent 2em
		width 680rpx
		margin 25rpx 0 0 35rpx
		line-height 40rpx

	.tips
		width 715rpx
		height 30rpx
		display flex
		font-size 20rpx
		color #7C7875
		justify-content flex-end
		margin-top 10rpx

		.tip
			margin-right 20rpx

			image
				width 28rpx
				height auto
				margin 0 10rpx

	.column-title
		color #909399
		font-size 35rpx
		width fit-content
		margin 20rpx 0 0 40rpx
		font-weight bold

	.column-subTitle
		font-size 50rpx
		margin-left 40rpx
		width fit-content
		position relative
		margin-top 10rpx
		z-index 1
		font-weight bold

	.phase
		width 680rpx
		height 250rpx
		margin 45rpx 0 0 35rpx
		background white
		box-shadow 0 0 50rpx #dcdfe6
		border-radius 20rpx
		display flex
		transition all 0.3s

		.phase-box
			width 50%
			height 100%
			position relative
			display flex
			justify-content center
			flex-direction column

			.image
				width 90%
				height 85%
				margin-left 5%
				position relative
				border-radius 30rpx
				overflow hidden
				transform translate3d(0, 0, 0)

			.title
				font-size 35rpx
				font-weight bold

			.mark
				position absolute
				width 35rpx
				height 35rpx
				border-radius 50%
				right 20rpx
				top 20rpx

			.collect
				position absolute
				bottom 20rpx
				font-size 20rpx
				display flex
				align-items flex-end
				justify-content center
				color #949393
				transition all 0.3s

				image
					width 40rpx
					height auto
					margin-right 20rpx

	.bottom
		position fixed
		bottom 0
		height 100rpx
		width 100%
		background white
		border-top 1rpx solid #EDECE8

		.pay
			width 220rpx
			height 100rpx
			background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/yingxiao/%E4%BB%98%E6%AC%BE%E8%83%8C%E6%99%AF.png') 0 0 / 100% 100%
			position absolute
			right 0
			display flex
			align-items center
			justify-content center
			color white
			letter-spacing 5rpx
			font-size 35rpx
</style>
